// 消息列表
.msg-list {
	li {
		clear:both;
		margin-bottom:$item-padding;
	}
	// 用户头像名称
	.user-info{
		.name{
			font-size: 11px;
			color: #666;
			max-width: 60px;
			text-overflow: ellipsis;
		    height: 22px;
		    white-space: nowrap;
		    overflow: hidden;
		}
		.face{
			width: 40px;
			height: 40px;
			background-color: $light;
			// border-color: $light;
			font-size: 40px;
    		// margin: 5px;
    		border: 3px solid $light;
		}
	}
	// 单条消息
	.message{
		padding-top: 3px;
		.msg-content {
			border-radius:5px;
			background:$light;
			padding:$content-padding - 4 $content-padding;
			position:relative;
		  word-break: break-word;
			&:after {
				position: absolute;
				top: 0.5rem;
				content: '';
				height: 0px;
				width: 0px;
				overflow: hidden;
				line-height: 0;
				border-width: 5px $content-padding /2 $content-padding /2;
				border-color: rgba(225, 225, 225, 0);
				border-style: dashed;
			}
			p:last-child{
				margin:0;
			}
			img {
				display:block;
				max-width:100%;
				border-radius:5px;
			}
		}
		.timestamp{padding:$content-padding /2 $padding-large-horizontal;}
	}
	// 我发送的消息
	.my-msg {
		float:right;
		text-align: right;
		.user-info, .message{
			float:right;
		}
		.user-info{
			margin-left: -100%;
			.name{}
		}
		img {float: right;}
		.message{
			margin-right: 40px;
		}
		.msg-content {
			background:$balanced;
			color:#fff;
			margin-right: $content-padding;
			&:after{
				border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $balanced;
				border-style: dashed dashed dashed solid;
				right: - $content-padding;
			}
		}

	}
	// 其他人的消息
	.others-msg{
		float: left;
		.user-info, .message{
			float:left;
		}
		.user-info {
			margin-right: -100%;
			.name{}
		}
		.face{
			color: $dark2;
		}
		.message{
			margin-left: 40px;
		}
		.msg-content {
			margin-left: $content-padding;
			&:after{
				border-color: rgba(0, 0, 0, 0) $light rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
				border-style: dashed solid dashed dashed;
				left: - $content-padding;
			}
		}
	}

}



#notice{
	height:auto;
	// padding-left: 0;
	// form{width:100%;}
	.row{padding: 0;}
	.button{min-width: 45px;padding:0;}
	#speaker,#msg{
		width:100%;
		margin-right: $content-padding;
	}
	#speaker{
	 	.button{
			min-height: $button-bar-button-height - 3;
	    	line-height: $button-bar-button-height - 2;
	    	border-color:$dark2;
	    	color:$dark2;
	    	margin:0;
    	}
	}

	#msg{
		max-height:5rem;
		background:rgba(0, 0, 0, 0);
		height:auto;
		border-bottom:1px solid $light3;
		.msg-to-send{
			-webkit-appearance: none;
			padding-bottom: $content-padding / 2 + 1;
			overflow-y:visible;
			width:100%;}
		&:hover{
			border-bottom-color:$balanced;
		}
	}
}
